<template>
  <div>
    <div class="query-div">
      <el-form :inline="true" :model="queryForm" size="small" style="font-size: 12px">
        <el-form-item label="用户类型">
          <el-select v-model="queryForm.userType" placeholder="用户类型">
            <el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="用户ID">
          <el-input v-model="queryForm.userId" placeholder="用户ID"></el-input>
        </el-form-item>
        <el-form-item label="用户手机">
          <el-input v-model="queryForm.userPhone" placeholder="用户手机"></el-input>
        </el-form-item>
        <el-form-item label="请求类型">
          <el-select v-model="queryForm.taskType" placeholder="请求类型" @change="selectTaskTypeChange(queryForm.taskType)">
            <el-option v-for="item in selectTaskTypeList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="处理状态">
          <el-select v-model="queryForm.operateStatus" placeholder="处理状态">
            <el-option v-for="item in $store.state.taskOperateStatusOptions" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="用户请求时间">
          <div class="block">
            <el-date-picker v-model="queryForm.userReqTime" type="datetimerange" :picker-options="pickerOptions" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
          </div>
        </el-form-item>
        <el-form-item label="客服跟踪时间">
          <div class="block">
            <el-date-picker v-model="queryForm.operateTime" type="datetimerange" :picker-options="pickerOptions" range-separator="-"
                            start-placeholder="开始日期" end-placeholder="结束日期" align="right"> </el-date-picker>
          </div>
        </el-form-item>

        <el-form-item label="标签">
          <el-select v-model="queryForm.taskLabel" placeholder="标签">
            <el-option v-for="item in selectTaskLabelList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
          <i class="el-icon-caret-top" @click="updateTaskLabelSort('up')" v-bind:class="{ labelCss:taskLabelSortUp }"></i>
          <i class="el-icon-caret-bottom" @click="updateTaskLabelSort('down')" v-bind:class="{ labelCss:taskLabelSortDown }"></i>
        </el-form-item>
        <el-form-item label="标定">
          <el-select v-model="queryForm.userLabel" placeholder="服务标定"  @change="selectQueryUserLabel">
            <el-option v-for="item in selectUserLabelList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="注册渠道">
          <el-select v-model="queryForm.registerChannel" placeholder="注册渠道"  @change="selectQueryUserLabel">
            <el-option v-for="item in registerChannelList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="下载渠道">
          <el-select v-model="queryForm.downLoadChannel" placeholder="下载渠道"  @change="selectQueryUserLabel">
            <el-option v-for="item in downloadChannelList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <!--管理员可查看内容-->
        <el-form-item label="客服ID" v-if="$store.state.user.grade > 0">
          <el-select v-model="queryForm.serviceId" placeholder="客服ID">
            <el-option v-for="item in selectServiceList" :key="item.value" :label="item.label" :value="item.value">
            </el-option>
          </el-select>
        </el-form-item>

        <!--<el-form :model="queryForm" size="small">-->
          <!--<el-row style="font-size: 14px" :gutter="10">-->

            <!--<el-col :span="2" class="label">用户类型</el-col>-->
            <!--<el-col :span="2" class="msg">-->
              <!--<el-select v-model="queryForm.userType" placeholder="用户类型" size="mini">-->
                <!--<el-option v-for="item in userTypeOptions" :key="item.value" :label="item.label" :value="item.value"></el-option>-->
              <!--</el-select>-->
            <!--</el-col>-->

            <!--<el-col :span="1" class="label">用户ID</el-col>-->
            <!--<el-col :span="3" class="msg">-->
              <!--<el-input v-model="queryForm.userId" placeholder="用户ID" size="mini"></el-input>-->
            <!--</el-col>-->

            <!--<el-col :span="1" class="label">用户手机</el-col>-->
            <!--<el-col :span="3" class="msg">-->
              <!--<el-input v-model="queryForm.userPhone" placeholder="用户手机" size="mini"></el-input>-->
            <!--</el-col>-->

          <!--</el-row>-->
        <!--</el-form>-->

        <br/>
        <el-form-item style="height: 40px">
          <el-button type="info" size="mini" @click="initQueryForm">重置</el-button>
          <el-button type="primary" size="mini" @click="queryFormOnSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </div>

  </div>
</template>

<script>
  export default {
    components: {},
    name: 'CustomerTaskQueryDiv',
    data () {
      return {
        selectTaskTypeList: [],
        selectTaskLabelList: [],
        selectServiceList: [],
        selectUserLabelList:[],
        registerChannelList: [],  // 注册渠道
        downloadChannelList: [],  // 下载渠道
        userTypeOptions: [
          { value: 'YYLC', label: '盈盈理财' },
          { value: 'YYX', label: '盈优选' }
        ],
        pickerOptions: {
          shortcuts: [{
            text: '最近一周', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 7); picker.$emit('pick', [start, end]);}
          }, {
            text: '最近一个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 30); picker.$emit('pick', [start, end]); }
          }, {
            text: '最近三个月', onClick(picker) { const end = new Date(); const start = new Date(); start.setTime(start.getTime() - 3600 * 1000 * 24 * 90); picker.$emit('pick', [start, end]); }
          }]
        },
        queryForm: {
          serviceId: '',
          userId: '',
          userPhone: '',
          taskType: '',
          taskLabel: '',      // 标签类型
          taskLabelSort: '',  // 标签排序规则
          operateStatus: 1,
          userType: 'YYLC',
          userReqTime: ['', ''], // 用户请求时间
          operateTime: ['', ''], // 客服跟踪时间
          userLabel: '',
          registerChannel: '',
          downloadChannel: ''
        },
        taskLabelSortUp: false,
        taskLabelSortDown: false
      }
    },
    created() {
      this.loadSelectTaskTypeList();
      this.loadCustomerList();
      this.selectTaskTypeChange('');
      this.$parent.loadCustomerTaskList3(this.queryForm);

      this.$$get('/task/user/label/list').then(res => {
        if (this.checkResponse(res)) {
          res.data.data.forEach(op => {
            this.selectUserLabelList.push({
              label: op, value: op
            })
          });
        }
      });

      this.$$get('/security/login/session')
        .then(res => {
          if (this.checkResponse(res)) {
            this.$$get('/task/channel/list/' + res.data.data.serviceId).then(res => {
              if (this.checkResponse(res)) {
                res.data.data[0].forEach(op => { this.registerChannelList.push({ label: op, value: op}) } );
                res.data.data[1].forEach(op => { this.downloadChannelList.push({ label: op, value: op}) } );
              }
            });
          }
        })
    },
    methods: {
      selectQueryUserLabel() {
        this.$store.state.userLabelDivShow = true;
      },
      initQueryForm() {

//        this.$store.state.userLabelDivShow = false;
        this.queryForm.serviceId = '';
        this.queryForm.userId = '';
        this.queryForm.userPhone = '';
        this.queryForm.taskType = '';
        this.queryForm.userLabel = '';
        this.queryForm.taskLabel = '';
        this.queryForm.registerChannel = '';
        this.queryForm.downLoadChannel = '';
        this.queryForm.taskLabelSort = '';
        this.taskLabelSortUp = false;
        this.taskLabelSortDown = false;
        this.queryForm.operateStatus = 1;
        this.queryForm.userType = 'YYLC';
        this.queryForm.userReqTime = ['', ''];
        this.queryForm.operateTime = ['', ''];
        this.$parent.loadCustomerTaskList3(this.queryForm);
      },
      queryFormOnSubmit() {
        this.$parent.loadCustomerTaskList3(this.queryForm);
      },

      selectTaskTypeChange(val) {
        this.selectTaskLabelList = [];
        this.$$get('/task/label/list', {
          taskCode: val,
          labelName: ''
        }).then(res => {
          if (this.checkResponse(res)) {
            let data = res.data.data;
            data.forEach(label => {
              this.selectTaskLabelList.push({value: label.labelName, label: label.labelName})
            });
          }
        });
      },
      updateTaskLabelSort(val) {
        if (this.queryForm.taskLabel === '') {
          this.$message.warning('还未选择任何标签');
          return;
        }

        if (val === 'up') {
          this.taskLabelSortUp = this.queryForm.taskLabelSort !== 'up';
          this.taskLabelSortDown = false;
        } else {
          this.taskLabelSortUp = false;
          this.taskLabelSortDown = this.queryForm.taskLabelSort !== 'down';
        }

        if (this.queryForm.taskLabelSort !== val) {
          this.queryForm.taskLabelSort = val;
        } else {
          this.queryForm.taskLabelSort = '';
        }

        if (this.taskLabelSortUp && this.queryForm.taskLabelSort === 'up') {
          this.$message.success('标签 ' + this.queryForm.taskLabel + ' - 升序排列');
        }
        if (this.taskLabelSortDown && this.queryForm.taskLabelSort === 'down') {
          this.$message.success('标签 ' + this.queryForm.taskLabel + ' - 降序排列');
        }
      },

      // 加载任务类型列表
      loadSelectTaskTypeList() {
        this.selectTaskTypeList = [];
        this.$$get('/type/list').then(res => {
          if (this.checkResponse(res)) {
            let data = res.data.data;
            let i = 1
            data.forEach(item => {
              this.selectTaskTypeList.push({value: item.taskCode, label: (i++) + '. ' + item.taskName})
            })
          }
        }).catch(e => { this.$message.error("加载任务类型列表异常: " + e) })
      },
      loadCustomerList() {
        this.selectServiceList = [];
        this.$$get('/customer/list').then(res => {
          if (this.checkResponse(res)) {
            let data = res.data.data;
            data.forEach(item => {
              this.selectServiceList.push({value: item.id, label: item.id + ' - ' + item.name})
            })
          }
        }).catch(e => { this.$message.error("加载客服ID列表异常: " + e) })
      }
    }
  }
</script>

<style lang="less" scoped>
  .label {
    text-align: right;
  }
  .msg {
    text-align: left;
  }

  .query-div {
    margin: 5px;
    text-align: center;

    .el-form-item {
      margin: 1px;

      i {
        color: #909399;
        font-size: 20px;
      }

      .labelCss {
        color: red;
      }
    }
  }
</style>
